@extends('admin.layout')
@section('title',$title)
@section('content')
<!-- <script type="text/javascript" src="{{asset('/home/js/jquery-1.8.3.min.js')}}"></script> -->
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                订单列表
                <small>订单列表</small>
            </h1>
            

            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="#">订单列表</a></li>
                <li class="active">订单列表</li>
            </ol>
        </section>
        @if(session('info'))
        <div class="alert alert-danger alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>
                            <h4><i class="icon fa fa-ban"></i>提示！</h4>
                            <p>{{session( 'info' )}}</p>
                            </div>
        @endif
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    

                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">订单列表</h3>
                        </div><!-- /.box-header -->

                        <div class="box-body">
                            <form action="{{url('/admin/order')}}">
                                <div class="col-xs-3">
                                
                                    <select name = "num" class="form-control">
                                            <option 
                                                @if(!empty($request['num'])&&$request['num']==5)
                                                selected
                                                @endif 
                                            >5</option>
                                            <option 
                                                @if(!empty($request['num'])&&$request['num']==10)
                                                selected
                                                @endif 
                                                >10</option>
                                            <option
                                                @if(!empty($request['num'])&&$request['num']==20)
                                                selected
                                                @endif 
                                            >20</option>
                                            
                                    </select>
                                
                                </div>
                                <div class="col-xs-4 ">
                                </div>
                                <div class="col-xs-5 ">
                                    <div class="input-group input-group">
                                        <input name="keywords" type="text" value="{{$request['keywords'] or ''}}" class="form-control">
                                        <span class="input-group-btn">
                                            <button class="btn btn-info btn-flat" >搜索</button>
                                        </span>
                                    </div><!-- /input-group -->
                                </div>
                            </form>
                                <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                
                                <tr>
                                <!-- 隐藏起来，所有数据从标签里取 -->
                                    <th style="display:none">订单ID</th>
                                    <th style="display:none">订单时间</th>
                                    <th>订单号</th>
                                    <th>关联用户id（uid）</th>
                                    <th style="display:none">关联商品id（gid）</th>
                                    <th style="display:none">商品图片</th>
                                    <th>商品的名称</th>
                                    <th>商品数量</th>
                                    <th>规格</th>
                                    <th>价格</th>
                                    <th>金额小计</th>

                                    <th style="display:none">收货地址id</th>
                                    <th style="display:none">收货地址</th>
                                    <th style="display:none">收货人姓名</th>
                                    <th style="display:none">收货人手机号</th>
                                    <th style="display:none">支付状态</th>
                                    
                                    
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($data as $v)
                               <div>
                                   <tr>
                                  
                                        
                                        <td class = "twt1" style="display:none">{{$v->id}}</td>
                                        <td class = "twt2" style="display:none">{{$v->otime}}</td>
                                        <td class = "dingdan" style="color:#008842">{{$v->onum}}</td>
                                        <td class = "yonghu" style="color:#008842">{{$v->uid}}</td>
                                        <td class = "twt3" style="display:none">{{$v->gid}}</td>
                                        <td class = "twt4" style="display:none">{{$v->gimg}}</td>
                                        <td class = "shangpin" >{{$v->gname}}</td>
                                        <td>{{$v->gnumber}}</td>
                                        <td>{{$v->gunit}}</td>
                                        <td>{{$v->gprice}}</td>
                                        <td>&nbsp;￥<?php echo $v->gnumber*$v->gunit*$v->gprice ?></td>

                                        <td class = "twt5" style="display:none">{{$v->rid}}</td>
                                        <td class = "twt6" style="display:none">{{$v->address}}</td>
                                        <td class = "twt7" style="display:none">{{$v->name}}</td>
                                        <td class = "twt8" style="display:none">{{$v->phone}}</td>
                                        <td class = "twt9" style="display:none">{{$v->ptatus}}</td>
                                        
                                        <td><a href = "/admin/order/edit/{{$v->id}}" class="btn btn-success ">编辑</a>
                                            <a href = "/admin/order/delete/{{$v->id}}" class="btn btn-success"  >删除</a>
                                        </td>
                                  
                                    </tr>
                                </div>
                                  @endforeach
                                </tbody>
                            </table>
                           {{$data->appends($request)->render()}}
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->

    <script type="text/javascript">
        $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                });
         // $('.dingdan').on('mouseover',function(){
         //     $(this).parent().css('background-color','red');
         // });
         //订单详情
        $('.dingdan').on('click',function(){
            var onum = $(this).parent().children("td[class='dingdan']").html()  
            var id = $(this).parent().children("td[class='twt1']").html()
            var otime = $(this).parent().children("td[class='twt2']").html()
            var name = $(this).parent().children("td[class='twt7']").html()
            var phone = $(this).parent().children("td[class='twt8']").html()
            var ptatus = $(this).parent().children("td[class='twt9']").html()

            

            $(this).parent().after('<tr class = "tianjia" style="background-color:red"><th>订单号</th><th>订单ID</th><th>订单时间</th><th>收货人姓名</th><th>收货人手机号</th><th>支付状态</th></tr><tr class = "tianjia" style="background-color:red"><td>'+onum+'</td><td>'+id+'</td><td>'+otime+'</td><td>'+name+'</td><td>'+phone+'</td><td>'+ptatus+'</td></tr>');

            
        });
         

        $('.dingdan').on('mouseout',function(){
            $(".tianjia").remove();
        });
         
        //<!-- 关联用户 -->
        $('.yonghu').on('click',function(){
            var uid = $(this).parent().children("td[class='yonghu']").html()  
            var rid = $(this).parent().children("td[class='twt5']").html()
            var name = $(this).parent().children("td[class='twt7']").html()
            var phone = $(this).parent().children("td[class='twt8']").html()
            var address = $(this).parent().children("td[class='twt6']").html()
            var ptatus = $(this).parent().children("td[class='twt9']").html()

            $(this).parent().after('<tr class = "tianjia" style="background-color:#2d35e1"><th>用户ID</th><th>收货地址</th><th>收货人姓名</th><th>收货人手机号</th><th>收货地址</th><th>支付状态</th></tr><tr class = "tianjia" style="background-color:#2d35e1"><td>'+uid+'</td><td>'+rid+'</td><td>'+name+'</td><td>'+phone+'</td><td>'+address+'</td><td>'+ptatus+'</td></tr>');
        });
        $('.yonghu').on('mouseout',function(){
            $(".tianjia").remove();
        });
        // //<!-- 商品-->
        
        // $('.shangpin').on('mouseover',function(){
        //     $(this).parent().after('<tr class = "tianjia" style="background-color:green"><th>订单ID</th><th>订单时间</th><th>订单号</th><th>收货人姓名</th><th>收货人手机号</th><th>支付状态</th></tr><tr class = "tianjia" style="background-color:green"><td>{{$v->id}}</td><td>{{$v->otime}}</td><td>{{$v->onum}}</td><td>{{$v->name}}</td><td>{{$v->phone}}</td><td>{{$v->ptatus}}</td></tr>');
        // });
        // $('.shangpin').on('mouseout',function(){
        //     $(".tianjia").remove();
        // });

        
    </script>
    @endsection